<template>
  <section class="product-manage-page">
    <div class="product-manage-mobile-page">11112</div>
    <div class="product-manage-pc-page">
      <section class="page-com" id="page" ref="page">
        <!-- 头部导航栏 -->
        <HeaderCom />
        <div class="banner">
          <img
            class="banner-bg"
            src="@/assets/images/productManage/banner.png"
            alt=""
            srcset=""
          />
          <p class="banner-text">创意探索 勇敢突破</p>
        </div>
        <!-- 项目类型分类 -->
        <div class="tabs">
          <div class="center">
            <div class="swiper" id="mySwiper">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                >
                  <div
                    :class="['type-item', { current: currentType === '' }]"
                    @click="changeType('')"
                    class=""
                  >
                    全部
                  </div>
                </div>
                <div
                  class="swiper-slide"
                  v-for="(item, index) in typeList"
                  :key="index"
                >
                  <div
                    :class="['type-item', { current: currentType === item.id }]"
                    @click="changeType(item.id)"
                    class=""
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div v-if="typeList.length > 4" class="swiper-button-next"></div>
              <div v-if="typeList.length > 4" class="swiper-button-prev"></div>
            </div>
          </div>
        </div>
        <!-- 项目列表 -->
        <div class="products">
          <div class="center" v-if="productList.length">
            <el-row :gutter="20" v-loading="loading">
              <el-col
                v-for="(item, index) in productList"
                :span="productList.length > 1 ? 12: 24"
                :key="index"
              >
                <PcProductItem :key="index" :data="item"
              /></el-col>
            </el-row>
          </div>
          <div class="empty-product" v-else>
            <img
              class="tips-img"
              src="@/assets/images/productManage/empry.png"
              alt=""
            />
            <p class="tips-text">暂无项目，敬请期待</p>
          </div>
          <div
            class="show-more-btn"
            v-if="productList.length"
            @click="
              $router.push({
                name: 'productList',
                query: {
                    id: currentType
                }
              })
            "
          >
            查看更多
          </div>
        </div>
        <!-- 提示图 -->
        <div class="tip-img">
          <img class="p1" src="@/assets/images/productManage/p1.png" alt="" />
        </div>
        <!-- 项目结果公示 -->
        <div class="result-list">
          <div class="center">
            <div class="title">项目结果公示</div>
            <div class="result-show-list" v-if="resultList.length">
              <div
                class="result-item"
                v-for="(item, index) in resultList"
                :key="index"
                @click="$router.push({name: 'productResultDetail', query: {id: item.id}})"
              >
                <span class="result-title">{{ item.title }}</span>
                <span class="result-date">{{ item.releaseTime || "--" }}</span>
              </div>
            </div>
            <div class="empty-product" v-else>
              <img
                class="tips-img"
                src="@/assets/images/productManage/empry.png"
                alt=""
              />
              <p class="tips-text">暂无项目结果，敬请期待</p>
            </div>
            <div
              class="show-more-btn"
              style="margin-top: 30px"
              v-if="resultList.length"
              @click="linkToReusltList"
            >
              查看更多
            </div>
          </div>
        </div>
        <div class="mainFooter" id="pageFooter">
          <FooterMenu />
        </div>
      </section>
    </div>
  </section>
</template>

<script>
import Vue from "vue";
import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header";
import vueMiniPlayer from "vue-mini-player";
import "vue-mini-player/lib/vue-mini-player.css";
import Pagination from "@/views/components/pagination";
import PcProductItem from "./components/pcProductItem.vue";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import {
  getPraxisProjectTypeList,
  getPraxisProjectPage,
  getProjectResultPage,
} from "../../request/api";
Vue.use(vueMiniPlayer);
export default {
  // 组件名称
  name: "productManage",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, FooterMenu, Pagination, PcProductItem },
  // 组件状态值
  data() {
    return {
      swiper: null,
      studentList: [],
      list: [],
      activeIndex: 0,
      total: 0,
      newsList: [],
      typeId: "",
      pageNo: 1,
      page: 1,
      pageSize: 10,
      projectTypeId: "",
      // entryStatus	报名状态;1:报名中;2:报名结束
      typeList: [],
      currentType: "",
      productList: [], // 项目列表
      resultList: [], // 项目结果列表
      loading: false // 接口loading
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  beforeDestory() {},
  // 组件方法
  methods: {
    linkToReusltList() {
        this.$router.push({name: 'productResultList'})
    },
    changeType(id) {
      this.currentType = id;
      this.getProductListByTypeId();
    },
    // 获取项目列表
    getProductListByTypeId() {
        this.loading = true
      // 获取当前项目列表
      getPraxisProjectPage({
        // entryStatus: "", // 可以不传
        projectTypeId: this.currentType,
        pageSize: 4,
        pageNo: 1,
        // sortField: {
        //   field: "t.weigth", // 默认按照t.weigth权重排序，不要改，除非修改时间顺序 t.release_time
        //   order: "desc",
        // },
      }).then((res) => {
        this.loading = false
        if (res && res.code === 0 && Array.isArray(res.data.list) && res.data.list.length > 0) {
            this.productList = res.data.list;
        } else {
            this.productList = []
        }
      }).finally(() => {
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getResultList() {
      getProjectResultPage({
        pageSize: 10,
        pageNo: 1,
      }).then((res) => {
        if (res && res.code === 0 ) {
            this.resultList = res.data.list || [];
        } else {
            this.resultList = [];
        }
      });
    },
    initData() {
      // 获取项目分类
      getPraxisProjectTypeList().then((res) => {
        if (res && res.code === 0 && Array.isArray(res.data)) {
          this.typeList = res.data;
          setTimeout(() => {
            this.swiper = new Swiper("#mySwiper", {
              slidesPerView: 5,
              slidesPerGroup: 5,
              pagination: {
                el: ".swiper-pagination",
                clickable: true,
              },
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
            });
          });
          this.getProductListByTypeId();
        } else {
          this.typeList = [];
          this.currentType = '';
        }
        
      });
      this.getResultList();
    },
  },
};
</script>
<style lang="less" scoped>
.product-manage-page {
  position: relative;
  height: 100%;
  width: 100;
}
.product-manage-pc-page {
  .page-com {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: rgb(237, 242, 249);
    padding-top: 80px;
    .banner {
      position: relative;
      width: 100%;
      height: 220px;
      .banner-bg {
        position: relative;
        width: 100%;
        height: 220px;
        object-fit: cover;
      }
      .banner-text {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translate3d(0, -50%, 0);
        font-size: 38px;
        font-family: "PingFangSC-Light, PingFang SC";
        font-weight: 300;
        color: #ffffff;
        line-height: 53px;
      }
    }
    .tabs {
      position: relative;
      width: 100%;
      background-color: #fff;
      border-bottom: 1px solid #d4d6da;
      .center {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;

        // display: flex;
        // flex-flow: row wrap;
        // justify-content: flex-start;
        .swiper {
          width: 100%;
          height: 100%;
          overflow-x: hidden;
        }
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
          .type-item {
            width: 100%;
            height: 59px;
            line-height: 59px;
            text-align: center;
            font-size: 20px;
            font-family: "PingFangSC-Medium, PingFang SC";
            font-weight: 500;
            color: #3d6cb0;
            cursor: pointer;
            transition: all 0.3s;
            &:hover {
              background-color: #3d6cb0;
              color: #fff;
            }
          }
          .current {
            background-color: #3d6cb0;
            color: #fff;
          }
        }
        .swiper-button-next {
          position: absolute;
          right: -50px;
        }
        .swiper-button-prev {
          position: absolute;
          left: -50px;
        }
      }
    }
    .products {
      position: relative;
      width: 100%;
      background-color: #fff;
      padding: 30px 0 40px;
      .center {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        margin-bottom: 65px;
      }
    }
    .tip-img {
      position: relative;
      width: 100%;
      height: 110px;
      background-color: #0a0844;
      .p1 {
        display: block;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        object-fit: cover;
      }
    }
    .result-list {
      position: relative;
      width: 100%;
      background-color: #edf2f9;
      .center {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        background-color: #fff;
        padding: 30px 30px 40px;
        .title {
          position: relative;
          padding-left: 22px;
          height: 36px;
          font-size: 25px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #37383d;
          line-height: 36px;
          margin-bottom: 30px;
          &:after {
            content: "";
            display: block;
            width: 7px;
            height: 25px;
            background-color: #3d6cb0;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate3d(0, -50%, 0);
          }
        }
        .result-item {
          position: relative;
          width: 100%;
          height: 68px;
          background-color: #fff;
          padding-left: 35px;
          padding-right: 15px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          .result-title {
            font-size: 20px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383d;
            line-height: 28px;
          }
          .result-date {
            font-size: 20px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 28px;
          }
          &:hover {
            background-color: #f9f9f9;
          }
          &:after {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            background-color: #3d6cb0;
            position: absolute;
            border-radius: 50%;
            left: 15px;
            top: 50%;
            transform: translate3d(0, -50%, 0);
          }
        }
      }
    }
  }
  .show-more-btn {
    width: 209px;
    height: 49px;
    line-height: 49px;
    background: #e1effe;
    border-radius: 16px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #3d6cb0;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
  }
  .empty-product {
    width: 100%;
    height: 100vh;
    max-height: 800px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    .tips-img {
      width: 240px;
      margin-bottom: 25px;
    }
    .tips-text {
      text-align: center;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 28px;
    }
  }
}
@media (min-width: 769px) {
  .product-manage-mobile-page {
    display: none;
  }
  .product-manage-pc-page {
    display: block;
  }
}
@media (max-width: 768px) {
  .product-manage-mobile-page {
    display: block;
  }
  .product-manage-pc-page {
    display: none;
  }
}
</style>
